html, body, div, ul, li, article, header {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}
html, body, .container {
  display: block;
  overflow: hidden;
  height: 100%;
}

body {
  display: none;
}

.transition-very-fast {
  transition: 150ms all linear;
}
.transition-fast {
  transition: 300ms all linear;
}
.transition-medium {
  transition: 600ms all linear;
}
.transition-slow {
  transition: 800ms all linear;
}

.container {
  position: relative;
  width: 100%;
  height: 100%;

  & > .ul {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    color: #87ceeb;
    background-color: #000;
  }
}
.card {
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: hidden;
  width: 12.5%;
  min-width: 0;
  height: 25%;
  min-height: 0;
  cursor: pointer;
  transform: translate(-50%, -50%);
  background-color: #000;
  z-index: 1;

  &.z-index-low {
    z-index: -1;
  }
  &.z-index-high {
    z-index: 1;
  }

  .inner, .canvas-container {
    position: absolute;
    top: 50%;
    left: 50%;
    box-sizing: border-box;
    width: 90%;
    height: 90%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    border: 3px double #1a77e0;
    background-color: #366a80;
  }

  .header, .article {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
  }

  .header {
    padding: 10px 0;

    .fa {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translate(-50%, 0);
    }
  }

  .article {
    z-index: -1;
    visibility: hidden;
    padding: 10px;
    transform: rotateY(180deg);
    opacity: 0;
    background-color: #c1212a;
  }

  &.active-province {
    z-index: 2;
    width: 25%;
    min-width: 200px;
    height: 50%;
    min-height: 320px;
    transform: translate(-50%, -50%) rotateY(180deg);

    .article {
      z-index: 1;
      visibility: visible;
      opacity: 1;
    }
  }

  .li {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
    list-style-type: none;
  }

  &:hover {
    .inner {
      background-color: #2194b7;
    }
  }
}

/* canvas */
#mycanvas {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
